*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    word-break: break-word;
    text-wrap: pretty;
}

:root {
    color-scheme: light dark;
    --loadingContainer-shade-color: light-dark(hsla(0, 0%, 77%, 0.7), hsla(0, 0%, 37%, 0.7));
    --quiz-padding: 10px;
    --quiz-background-color: light-dark(hsl(40, 27%, 94%), hsl(212, 10%, 29%));
    --footer-background-color: light-dark(hsl(51, 15%, 83%), hsl(199, 17%, 32%));
    --correct-color: light-dark(green, hsl(120, 78%, 55%));
    --incorrect-color: light-dark(hsl(0, 100%, 41%), hsl(8, 92%, 64%));
    --required-color: light-dark(hsl(0, 63%, 37%), hsl(59, 100%, 51%));
    --background-color: light-dark(hsl(50, 19%, 88%), hsl(200, 5%, 22%));
    --text-color: light-dark(black, white);
    --link-color: light-dark(hsl(240, 100%, 44%), hsl(177, 100%, 91%));
    --link-visited-color: light-dark(hsl(261, 100%, 24%), hsl(62, 100%, 74%));
    --link-active-color: light-dark(hsl(0, 68%, 29%), white);

    --star-url: url("star.svg");
    --star-filled-url: light-dark(url("star_filled_light.svg"), url("star_filled_dark.svg"));
    --star-color: light-dark(hsl(0, 0%, 71%), hsl(0, 0%, 89%));
    --filled-star-color: yellow;

    --score-container-color: light-dark(hsl(39, 79%, 69%), rgb(15, 66, 133));
    --score-container-text-color: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));

    --border-color: light-dark(hsl(263, 15%, 23%), hsl(200, 52%, 94%));

    --figure-overflow-shadow-color: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
    --transparent-color: hsl(0, 0%, 0%, 0);

    --figure-image-text-color: light-dark(hsl(14, 87%, 24%), hsl(61, 100%, 50%));

    --aside-background-color: light-dark(hsl(36, 27%, 90%), hsl(210, 10%, 35%));

    --dragDrop-item-color: light-dark(hsl(167, 28%, 86%), hsl(219, 10%, 33%));
    --dragDrop-item-color-focused: light-dark(hsl(167, 9%, 82%), hsl(219, 15%, 36%));
    --dragDrop-item-ghost-color: light-dark(hsl(167, 9%, 60%), hsl(219, 10%, 25%));
    --dragDrop-placeholder-border-color: light-dark(hsl(270, 3%, 30%), hsl(204, 7%, 86%));
}


body {
    font-family: "Liberation Sans", sans-serif;
    min-height: 100dvh;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
}

a {
    color: var(--link-color);
}

a:active {
    color: var(--link-active-color);
}

a:visited {
    color: var(--link-visited-color);
}

main {
    display: grid;
    flex-grow: 1;
    align-self: center;
}

rating-input-el {
    display: inline-block;
    position: relative;
}

.container {
    position: relative;
    display: flex;
    gap: 3px;
    align-items: center;
}

.star,
.filledStar {
    display: inline-block;
    width: 2rem;
    aspect-ratio: 1 / 1;
}

.star {
    background: center / contain var(--star-filled-url) no-repeat;
}

.filledStar {
    background: center / contain var(--star-url) no-repeat;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--footer-background-color);
    padding: 10px 0;
}

rating-el {
    anchor-name: --rating-el;
}

rating-input-el {
    anchor-name: --rating-input-el;
}

#ratingOutputContainer,
#ratingInputOutputContainer {
    position: absolute;
    position-area: center top;
    width: max-content;
    cursor: text;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    padding: 2px 5px;
    border-radius: 5px;
}

#ratingOutputContainer {
    position-anchor: --rating-el;
}

#ratingInputOutputContainer {
    position-anchor: --rating-input-el;
}